<template>
	<el-card shadow="always" :body-style="{ padding: '20px' }">
		<div slot="header">
			<span>添加商品</span>
		</div>
		<!-- card body -->
		<el-form
			:model="product"
			ref="productForm"
			:rules="rules"
			label-width="100px"
		>
			<!-- 商品名称 -->
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="product.name"></el-input>
			</el-form-item>
			<!-- 店铺名称 -->
			<el-form-item label="店铺名称" prop="shop">
				<el-input v-model="product.shop"></el-input>
			</el-form-item>
			<!-- 分类 -->
			<el-form-item label="商品分类">
				<el-select
					v-model="product.categoryId"
					placeholder="请选择商品分类"
				>
					<el-option
						v-for="category in categoryList"
						:key="category.id"
						:label="category.name"
						:value="category.id"
					></el-option>
				</el-select>
			</el-form-item>

			<!-- 价格 -->
			<el-form-item label="价格">
				<el-input v-model="product.price"></el-input>
			</el-form-item>
			<!-- 原价 -->
			<el-form-item label="原价">
				<el-input v-model="product.oldprice"></el-input>
			</el-form-item>
			<!-- 上下架 -->
			<el-form-item label="上下架">
				<el-radio-group v-model="product.putaway">
					<el-radio label="1">上架</el-radio>
					<el-radio label="0">下架</el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- 描述 -->
			<el-form-item label="描述">
				<el-input v-model="product.detail" type="textarea"></el-input>
			</el-form-item>
			<!-- 图片 -->
			<el-form-item label="图片">
				<!-- <el-input v-model="product.picture"></el-input> -->
				<!-- auto-upload false 选中文件不上传 -->
				<el-upload
					
					name="headerImg"
					class="avatar-uploader"
					action="http://api.yuguoxy.com/api/uploadFile"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload"
					:on-change="onChangeFile"
				>
					<img v-if="imageUrl" :src="imageUrl" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">添加商品</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import { RequestCategoryList, RequestProductAdd } from '@/api/product'
export default {
	data() {
		return {
			product: {
				categoryId: 1, //分类id
				shop: '', //店铺名称
				name: '', // 商品名称
				price: 0, // 价格
				oldprice: 0, // 原价
				putaway: '0', // 上架:1下架:0
				detail: '', //描述
				picture: '' //图片
			},
			categoryList: [], //商品列表
			rules: {
				name: [
					{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					}
				],
				shop: [
					{
						required: true,
						message: '请输入店铺名称',
						trigger: 'blur'
					}
				]
			},
			imageUrl: '', //图片地址
			url: '',
			autoUpload: true // 是否选中本地文件自动调用action指定接口上传
		}
	},
	created() {
		this.getCategoryList()
	},
	methods: {
		onSubmit() {
			//表单验证是否通过
			this.$refs.productForm.validate(valit => {
				if (valit) {
					// 添加商品
					this.onAddProudct(this.product)
				}
			})
		},
		/**
		 * 商品分类列表
		 */
		async getCategoryList() {
			let data = await RequestCategoryList()
			let { resultCode, resultInfo } = data
			if (resultCode === 1) {
				this.categoryList = resultInfo.list
			}
		},
		/**
		 * 商品添加
		 */
		async onAddProudct(oldproduct) {
			let product = { ...oldproduct, picture: this.url }
			let data = await RequestProductAdd(product)
			let { resultCode, resultInfo } = data
			if (resultCode === 1) {
				this.$message('添加商品成功!')
			} else {
				this.$message('添加商品失败，' + resultInfo)
			}
		},
		/**
		 * 上传成功
		 */
		handleAvatarSuccess(res, fileData) {
			// console.log('上传成功 ', fileData)
			// this.imageUrl = URL.createObjectURL(fileData.raw) // fileData.raw 选中本地文件对象
			this.url = fileData.response.resultInfo.url
			console.log('url ', this.url)
		},
		/**
		 * 上传之前
		 *  图片校验
		 *    返回false不向下执行
		 */
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			return isJPG && isLt2M
		},
		/**
		 * 选中本地文件触发
		 */
		onChangeFile(fileData) {
			this.imageUrl = URL.createObjectURL(fileData.raw) // fileData.raw 选中本地文件对象
		}
	}
}
</script>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>